<template>
  <div class="edit-box">
    <header>
      <el-button type="primary" @click="submitClick(data)">保存</el-button>
      <el-button @click="addstore()">取消</el-button>
    </header>
    <main>
       <el-form 
       :model="data"
       :rules="rules"
       >
        <el-row :gutter="20">
          <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
            <el-form-item label="商铺编码："
             prop="shop_id" 
             >
              <el-input v-model="shop_id"
               placeholder="输入商铺编码"
               />
             </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
            <el-form-item label="商铺名字：" prop="shop_name" >
              <el-input v-model="shop_name" placeholder="输入商铺名称"/>
             </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
            <el-form-item label="店长：" prop="clark">
                  <el-input v-model="clark" placeholder="选择店长" />
                  <el-button type="primary" :icon="Search" @click="searchClick()" ></el-button>
                  <!-- 用户列表 -->
                      <el-dialog v-model="dialogTableVisible" title="选择店长" width="1000" height="300">
                          <div class="clark">
                            <el-input v-model="queryname" size="large" placeholder="输入名字过滤"  />
                            <el-button type="primary" @click="queryEvt(queryname)">查询</el-button>
                          </div>
                        <el-table :data="state.user" >
                          <el-table-column property="id"  label="用户编码" width="430" />
                          <el-table-column property="name" label="用户名字" width="430" />
                          <el-table-column  label="操作">
                            <template #default="scope">
                              <span class="table-link" @click="btnclick(scope.row)">选择</span>
                            </template>
                          </el-table-column>
                        </el-table>
                        <!-- 分页器 -->
                       <div class="pagination">
                        <el-pagination 
                           v-model:current-page="current"
                           v-model:page-size="pageSize"
                           layout="total, sizes, prev, pager, next, jumper"
                           :total="total"
                           :page-sizes="[10, 20, 30, 40]"
                           @current-change="handleCurrentChange"
                           @size-change="handleSizeChange"
                        />
                       </div>
                      </el-dialog>
                       
             </el-form-item>
         </el-col>
          <el-col :span="24">
            <el-form-item label="店员：" prop="clark">
              <!-- 复选框 -->
              <el-checkbox-group v-model="manager" size="small">
                   <el-checkbox-button
                     v-for="city in state.cities"
                     :key="city"
                     :label="city"
                     >{{ city  }}</el-checkbox-button
                   >
                 </el-checkbox-group>
                 <!-- <el-input v-model="data.clark" placeholder="选择店长"/> -->
                <el-button type="primary" :icon="Search" @click="searchClick()" ></el-button>
             </el-form-item>
         </el-col>
         <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
            <el-form-item label="商铺经度：" prop="lng">
              <el-input v-model="lng" />
             </el-form-item>
         </el-col>
         <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
            <el-form-item label="商铺纬度：" prop="lat">
              <el-input v-model="lat" />
             </el-form-item>
         </el-col>
         <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
            <el-form-item label="经营区域：" prop="area" >
              <el-cascader
                v-model="value"
                :options="state.getData"
                :props="props"
                clearable 
              />
             </el-form-item>
         </el-col>
         <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
            <el-form-item label="详细地址：" prop="address" >
              <el-input v-model="address" placeholder="输入详细地址"/>
             </el-form-item>
         </el-col>
         <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
            <el-form-item label="备注：" prop="remark" >
              <el-input v-model="remark" placeholder="输入备注"/>
             </el-form-item>
         </el-col>
        </el-row>
       </el-form>
    </main>
  </div>
</template>

<script setup>
import router from '@/router';
import {ref,reactive} from 'vue'
import SCdata  from '@/views/shop/data.js'
import { userList ,shopUpdate } from '@/apis/shop'
import { Search } from '@element-plus/icons-vue'
// import pagination from '@/views/shop/Pagination.vue'
import store from '@/store';

const value = ref([])
const props = {
  expandTrigger: 'hover' 
}
const state= reactive({
  getData:[],
  user:[],
  cities:[]
})
//省市区三级联动数据
state.getData = SCdata
console.log(state.getData)
//
  const data = ref({
        shop_id:'',
        shop_name:'',
        clark:'',
        manager:'',
        lat:'',
        lng:'',
        area:'',
        address:'',
        remark:'',
        id:'',
        name:''
    })
    data.value = store.getters.detailList
    console.log(data.value)

    const rules = reactive({
      shop_id:[
        { required: true, message: '输入商铺编码', trigger: 'blur' },
      ],
      shop_name:[
        { required: true, message: '输入商铺名字', trigger: 'blur' },
      ],
      clark:[
        { required: true, message: '选择店员', trigger: 'blur' },
      ],
      manager:[
        { required: true, message: '选择店长', trigger: 'blur' },
      ],
      lat:[
        { required: true,trigger: 'blur' },
      ],
      lng:[
        { required: true,trigger: 'blur' },
      ],
      area:[
        { required: true, message: '选择省市区', trigger: 'blur' },
      ],
      remark:[
        { required: true, message: '输入备注', trigger: 'blur' },
      ],
      address:[
        { required: true, message: '输入详细地址', trigger: 'blur' },
      ],
    })
      const dialogTableVisible = ref(false)
  //跳转返回到列表页
   function addstore() {
    router.push('/shop/list')
   }
  
   const searchClick = () => {
    dialogTableVisible.value = true
    userData()
   }
   
   const checkboxGroup3 = ref(['Shanghai'])
   const cities = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen']
   //获取用户列表
  //  count: 149
  //  rows: [{id: "ycz9527", state: 1, name: "严朝政", photo: "/photo/user.png", sex: 2, address: "成都市",…},…]
  //  et: "_1672709734970"
  //  message: "查询用户 success"
    const current = ref(1)
    const pageSize = ref(10)
    const total = ref(100)
    const queryname = ref('')
    const userData = async ()=> {
     const result = await userList({page:current.value,size:pageSize.value,name:queryname.value})
     state.user = result.data.rows
     total.value = result.data.count
    //  checkboxGroup3.value = result.data.rows.id
     console.log(result.data.rows[0].id)
     console.log(total.value)
     console.log(result)
   } 
   //数量发生变化时
   const handleSizeChange = (size) => {
     current.value = 1
     pageSize.value= size
     userData()
   }
   //条数发生变化时
   const handleCurrentChange = (page) => {
    current.value = page
     userData()
   }
   const queryEvt=(name)=>{
    queryname.value = name
    // console.log(namequery.value);
    userData()
}

   //用户名回显
   function btnclick(row){
    data.value.clark= row.id
    data.value.manager = row.id
    dialogTableVisible.value = false
   }
  //调用新增接口
    const submitClick = async (data) => {
      const res = await shopUpdate(data)
      if(res.code === 200){
        alert('保存成功')
        router.push('/shop/list')
      }else{
        alert('保存失败')
      }
    }



    // address: "哈哈哈哈大厦"
    // area: "四川省/成都市/武侯区"
    // clark: "ywc01"
    // createdAt: "2022-10-11"
    // created_at: "2022-10-11"
    // lat: "39.94673306100238400000"
    // lng: "116.43674098784079000000"
    // manager: "ywc01"
    // remark: "片区的便利店，人员比较多"
    // shop_id: "13060078135"
    // shop_name: "乐多便利店"
    // state: "N"
    // updatedAt: "2022-12-19"
    // updated_at: "2022-12-19"
</script>

<style lang="less" scoped>

  header{
    display: block;
    width: 100%;
    height: 80px;
    text-align: right;
    line-height: 80px;
    border-bottom:1px solid #ddd ;
    button{
      margin: 12px;
    }
   }
   main{
    height: 100%;
    background-color: #fff;
    padding: 8px 12px;
   }
   .el-row {
     margin-bottom: 20px;
   }
   .el-row:last-child {   
     margin-bottom: 0;
   }
   .el-col {   
     border-radius: 4px;
   }
   .grid-content {
     border-radius: 4px;
     min-height: 36px;
   }
  /deep/ .el-form-item__content{
      flex-wrap: nowrap;
   }
 
   .img-but{
    width:30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    background-color: #3636eb;
   }
   .bg-img{
    width:100%;
    height: 100%;
    font-size:30px;
   }
  .el-popper {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
  }
  .el-overlay{
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: auto;
    outline: 0;
    z-index: 1000;
  }
  .el-dialog__body{
    text-align: right;
  }
  .clark{
    display: flex;
    height:20px;
    width: 240px;
    text-align: right;
    margin: 0 24px 24px 24px;
    float:right;
  }
  .el-table {
    overflow-y: scroll;
  }
  .el-table--fit {
    height: 300px;
  }
  .table-link {
    color: #1890ff;
    cursor: pointer;
  }
  /deep/ .pagination{
    text-align: right;
  }

 .pagination{
  display: flex;
 }
 /deep/ .el-input__wrapper{
  height:30px
 }
</style>
